import { Avatar, Spin } from 'antd';
// import { ClickParam } from 'antd/es/menu';
import React from 'react';
import { connect } from 'dva';

import { ConnectProps, ConnectState } from '@/models/connect';
import { CurrentUser } from '@/models/user';
import styles from './index.less';

export interface GlobalHeaderRightProps extends ConnectProps {
  currentUser?: CurrentUser;
  menu?: boolean;
}

class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  onMenuClick: any = () => {
    const { dispatch } = this.props;
    if (dispatch) {
      dispatch({
        type: 'user/logout',
      });
    }
  };

  render(): React.ReactNode {
    const { currentUser = {}, menu } = this.props;
    if (!menu) {
      return (
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={styles.name}>{currentUser.name}</span>
        </span>
      );
    }

    return currentUser && currentUser.name ? (
      <span className={`${styles.action} ${styles.account}`}>
        <span className={styles.name}>{currentUser.name}</span>
        <span className={styles.logout} onClick={this.onMenuClick}>退出</span>
      </span>
    ) : (
      <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
    );
  }
}
export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
